<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>事件处理程序</title>
        <style>
            .wrapper { border: 1px solid blue; margin: 15px auto; height: 50px; }
            code { border: 1px solid gray; background: #f4f4f4; padding: 5px; }
        </style>
    </head>
    <body>
        <h1>事件处理程序</h1>

        <script>
            function change(element){
                console.log( element );
                element.style.backgroundColor = '#ff0';
            }

            function recover(element){
                console.log( element );
                element.style.backgroundColor = 'transparent';
            }
        </script>

        <h3>DOM 0 事件处理程序</h3>
        <p>直接在HTML元素开始标签中用 <code>`on` + `事件名称` = "函数(参数)"</code>形式绑定事件处理程序</p>
        <div class="wrapper first" onmouseover="change(this)" onmouseout="recover(this)"></div>

        <h3>DOM 1 事件处理程序</h3>
        <p>在JavaScript代码中通过 <code>`on` + `事件名称` = function(){ }</code> 形式绑定事件处理程序</p>
        <div class="wrapper second" id="second"></div>
        <script>
            var s = document.getElementById('second');
            s.onmouseover = function() {
                s.style.backgroundColor = '#dfdfdf';
            }
            s.onmouseout = function() {
                s.style.backgroundColor = 'transparent';
            }
        </script>

        <h3>DOM 2 事件处理程序</h3>
        <p>通过addEventListener为事件目标绑定事件处理程序</p>
        <div class="wrapper third" id="third"></div>
        <script>
            const t = document.querySelector('#third');
            t.addEventListener('mouseover', function(){
                // t.style.backgroundColor = '#dfdfdf';
                this.style.backgroundColor = '#dfdfdf';
            });
            t.addEventListener('mouseout', function(){
                // t.style.backgroundColor = 'transparent';
                this.style.backgroundColor = 'transparent';
            });
        </script>

        <h3>DOM 3 事件处理程序</h3>
        <p>通过addEventListener为事件目标绑定事件处理程序</p>
        <p>
            <a href="https://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM 3 事件流</a>
            <a href="https://www.quirksmode.org/js/events_order.html#link4">JavaScript事件顺序</a>
        </p>
        <div class="wrapper fourth" id="fourth"></div>
        <script>
            const f = document.querySelector('#fourth');
            f.addEventListener('mouseover', function(){
                //f.style.backgroundColor = '#dfdfdf';
                this.style.backgroundColor = '#dfdfdf';
            }, true);
            f.addEventListener('mouseout', function(){
                //f.style.backgroundColor = 'transparent';
                this.style.backgroundColor = 'transparent';
            }, true);
        </script>


    </body>
</html>